<!DOCTYPE html>
<html>
<head>
	<!-- <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" /> -->
    <meta charset="utf-8" />
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="X-UA-Compatible" content="edge" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="css/clock-k1.css"/>
    <title>Kindle Clock</title>

<!--    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-7286632197002340",
            enable_page_level_ads: true
        });
    </script> -->

<!-- 	<script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?653e8df99a6970c49cf53386a1dd4fb2";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
 -->
</head>

<body style="overflow:hidden; margin:0">
	<div id="main" style="position: relative;" >
		<div class="rotateField" style="position: absolute; bottom: 40px; right: 40px;">
			<span class="iconfont icon-rotate-right" style="font-size: 40px;" onclick="rotateTimeFieldRight()"></span>
		</div>
		<div class="parentMain">
			<div id="timeContentField" style="background-color: white; display:inline-block; margin: auto; align-content: center;">
				<span id="timeField" style="font-size: 8rem;display:inline-block; width: 100%; text-align: center;" ></span>
				<br />
				<span id="dateField" style="font-size: 4rem;"></span>
			</div>
		</div>
	</div>

</body>

<script>
	timeFieldRotateDeg = 0;
    nowTimestamp();
    window.setInterval(nowTimestamp, 1000);

	function autoResizeDiv(){
		document.getElementById('main').style.height = window.innerHeight +'px';
	}
	window.onresize = autoResizeDiv;
	autoResizeDiv();

    function nowTimestamp() {
		var time = document.getElementById('timeField');
		var dateField = document.getElementById('dateField');
		time.innerHTML = getNowTime();
		dateField.innerHTML = getDateHtml();
    }

	function getNowTime() {
		var date = new Date();
		var seperator2 = ":";
		min = date.getMinutes();
		if(min >= 0 && min <= 9) {
			min = "0" + min;
		}
		sec = date.getSeconds();
		if(sec >= 0 && sec <= 9) {
			sec = "0" + sec;
		}
		var currentdate = date.getHours() + seperator2 + min
		    + seperator2 + sec;
		return currentdate;
	}

	function getDateHtml() {
	    var date = new Date();
	    var seperator1 = "-";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
		weekday = "";
		d = date.getDay();
		if(d == 1) {
			weekday = "一";
		} else if (d == 2) {
			weekday = "二";
		} else if (d == 3) {
			weekday = "三";
		} else if (d == 4) {
			weekday = "四";
		} else if (d == 5) {
			weekday = "五";
		} else if (d == 6) {
			weekday = "六";
		} else if (d == 7) {
			weekday = "天";
		}
		
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
			+ '  星期' + weekday;
	    return currentdate;
	}

	function rotateTimeFieldRight() {
		timeFieldRotateDeg += 90;
		if(timeFieldRotateDeg == 360) {
			timeFieldRotateDeg = 0;
		}
		timeContentField = document.getElementById('timeContentField');
		console.log('rotate time content field');
		timeContentField.style.webkitTransform = 'rotate('+timeFieldRotateDeg+'deg)'; 
		timeContentField.style.mozTransform    = 'rotate('+timeFieldRotateDeg+'deg)'; 
		timeContentField.style.msTransform     = 'rotate('+timeFieldRotateDeg+'deg)'; 
		timeContentField.style.oTransform      = 'rotate('+timeFieldRotateDeg+'deg)'; 
		timeContentField.style.transform       = 'rotate('+timeFieldRotateDeg+'deg)'; 
	}

</script>

</html>